<template>
	<view class="wrap">
		<!-- <text class="title">添加银行卡</text>
		<view class="item">
			<text class="titl">输入银行卡添加</text>
			<u--form labelPosition="left" :model="userInfo" ref="uForm">
				<u-form-item label="卡号" borderBottom ref="item1" labelWidth="66">
					<u--input v-model="userInfo.carNum" border="none" @change='numberCard'
						placeholder="请输入卡号"></u--input>
				</u-form-item>
				<u-form-item label="卡类型" borderBottom ref="item1" labelWidth="66">
					<uni-data-select v-model="userInfo.carType" :localdata="range" placeholder="请选择卡类型"
						@change="changes"></uni-data-select>
				</u-form-item>
				<u-form-item label="银行预留手机号" borderBottom ref="item1" labelWidth="66">
					<u--input v-model="userInfo.Phone" disabledColor="#ffffff" placeholder="请输入手机号"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label="银行名称" borderBottom ref="item1" labelWidth="66">
					<u--input v-model="carName" disabledColor="#ffffff" placeholder="请输入银行名称" border="none"></u--input>
				</u-form-item>
				<u-button type="primary" text="绑 定" @click="addCar"></u-button>
			</u--form>
		</view>
		<u-modal class="wrap" showCancelButton @cancel="cancel" @confirm="confirm" :show="show" :title="title">
			<u--input placeholder="请输入验证码" border="surround" v-model="auth_code"></u--input>
			<u-toast ref="uToast"></u-toast>
			<u-code changeText="X秒" :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
			<u-button @tap="getCode">{{tips}}</u-button>
		</u-modal> -->
		<view class="top" >
			<view class="leftText">
				添加银行卡租金按期付
			</view>
			<view class="rightBut">
				<!-- <image :src=" baseurl + '/image/bindIcon1.png'" mode="aspectFill"></image> -->
				<view class="bgBox">
					
				</view>
				<text class="">
					签约银行代扣款协议可避免逾期交租
				</text>
			</view>
		</view>
		<view class="item">
			<u--form labelPosition="right" :model="userInfo" ref="uForm">
				<u-form-item label="卡类型"  ref="item1" labelWidth="190">
					<u-radio-group
					    v-model="userInfo.carType"
					    placement="row"
					    @change="groupChange"
					  >
					    <u-radio
					      :customStyle="{marginBottom: '8px'}"
					      v-for="(item, index) in cardType"
					      :key="index"
					      :label="item.name"
					      :name="item.name"
					      @change="radioChange"
					    >
					    </u-radio>
					  </u-radio-group>
				</u-form-item>
				<u-form-item label="银行卡号"  ref="item1" labelWidth="170">
					<u--input v-model="userInfo.carNum" border="none" 
						placeholder="请输入常用的银行卡号"></u--input>
				</u-form-item>
				<u-form-item label="预留手机号"  ref="item1" labelWidth="155">
					<u--input v-model="userInfo.Phone"  placeholder="请输入银行预留的手机号"
						border="none"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<!-- 验证码  协议 -->
		<view class="codeBox">
			<view class="code">
				<view class="leftBox">
					<u--input v-model="userInfo.auth_code" border="none"
						placeholder="请输入短信验证码"></u--input>
				</view>
				<view class="" style="color: #fc7d73;" >
					<!-- 获取验证码 -->
					<u-toast ref="uToast"></u-toast>
					<u-code changeText="X秒" :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
					<u-button @click="getCode" >{{tips}}</u-button>
				</view>
			</view>
			<view class="agreement">
				<!-- 我已阅读并同意<text>《银行卡代扣服务协议》</text> -->
				<u-checkbox-group>
					<u-checkbox v-model="checkedData" size='12' labelSize='12' activeColor="#5BC5BB" shape="circle" label="我已阅读并同意"
						@change="checkedChange"></u-checkbox>
				</u-checkbox-group>
				<view class="tongyi">
					<text class="tongyi1"></text>
					<text class="tongyi2"  style="color: #8090b0;" @click="gotoBank(list.id)">{{list.title}}</text>
				</view>
			</view>
			
		</view>
		<view class="bot">
			<text @click="confirm">确认绑卡</text>
		</view>
	</view>
</template>

<script>
	import baseurl from "@/config.js"
	// import blankName from '@/common/bankName.js'
	// import BIN from 'bankcardinfo'
	export default {
		data() {
			return {
				baseurl: '',
				cardType:[
					{
						name:'储蓄卡'
					},
					{
						name:'信用卡'
					},
				],
				tips: '',
				seconds: 60,
				carName: '',
				tim: '',
				numBli: false,
				num: 3,
				auth_code: '',
				show: false,
				title: '验证码',
				content: '确定绑定银行卡',
				range: [{
					value: 101,
					text: "借记卡"
				}],
				showSex: true,
				userInfo: {
					carNum: '',
					carType: '',
					Phone: '',
				},
				ischeck:'',
				list:''
			}
		},
		created() {
			this.baseurl = baseurl.app_url;
			this.getBankxieyi()
		},
		methods: {
			// 获取银行协议
			getBankxieyi(){
				let self = this;
				self._post('agreement.agreement/index', {
					page:1,
					list_rows:20,
					agreement_type:2
				}, function(res) {
					self.list = res.data.list.data[0];
				});
			},
			gotoBank(id){
				uni.navigateTo({
					url:"/pages/hetong/htdetail?id=" + id
				})
			},
			checkedChange(val){
				this.ischeck = val
			},
			radioChange(val){
			},
			groupChange(val){
			},
			codeChange(text) {
				this.tips = text;
			},
			// 点击获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
					// 发送验证码
					this.getauthCode()
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 发送验证码
			getauthCode(){
				let self = this
				let {
					carNum,
					carType,
					Phone
				} = self.userInfo
				var carBool = /^([1-9]{1})(\d{15}|\d{16}|\d{17}|\d{18}|\d{19})$/.test(carNum)
				let phoneBool = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(Phone)
				if (!carNum) {
					uni.$u.toast('请输入银行卡号');
					return
				} else if (!carBool) {
					uni.$u.toast('请输入正确的银行卡号');
					return
				} else if (!carType) {
					uni.$u.toast('请选择类型');
					return
				} else if (!Phone) {
					uni.$u.toast('请输入电话号码');
					return
				} else if (!phoneBool) {
					uni.$u.toast('请输入正确的电话号码');
					return
				}
				// 获取验证码
				self._post('withhold.withhold/index', {
					bank_card: carNum,
					card_type: carType,
					phone: Phone,
					car_name: this.carName
				}, function(res) {
					// self.show = true
				})
			},
			// end() {
			// 	uni.$u.toast('倒计时结束');
			// },
			// start() {
			// 	uni.$u.toast('倒计时开始');
			// },
			// 获取银行信息
			// numberCard(e){
			// 	if(this.userInfo.carNum.length>=16){
			// 		BIN.getBankBin(this.userInfo.carNum).then((res)=>{
			// 			this.carName = res.bankName
			// 			console.log(this.carName,'carName')
			// 		})
			// 	}
			// },
			// 取消按钮
			cancel() {
				this.show = false
				this.num = 60
				clearInterval(this.tim)
				this.auth_code = ''
			},
			// 确定按钮
			confirm() {
				let self = this
				if(!self.ischeck){
					uni.$u.toast('请勾选银行卡代购协议');
					return
				}
				let {
					carNum,
					carType,
					Phone
				} = self.userInfo
				var carBool = /^([1-9]{1})(\d{15}|\d{16}|\d{17}|\d{18}|\d{19})$/.test(carNum)
				let phoneBool = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(Phone)
				if (!carNum) {
					uni.$u.toast('请输入银行卡号');
					return
				} else if (!carBool) {
					uni.$u.toast('请输入正确的银行卡号');
					return
				} else if (!carType) {
					uni.$u.toast('请选择类型');
					return
				} else if (!Phone) {
					uni.$u.toast('请输入电话号码');
					return
				} else if (!phoneBool) {
					uni.$u.toast('请输入正确的电话号码');
					return
				}
				self.num = 60;
				clearInterval(self.tim);
				let obj = {
					bank_card: carNum,
					card_type: carType,
					phone: Phone,
					car_name: self.carName,
					auth_code: self.auth_code
				}
				// 绑卡
				self._post('withhold.ConfirmSign/ConfirmSign', obj, function(res) {
					if (res.code == 1) {
						uni.showToast({
							title: '绑定成功'
						})
						uni.reLaunch({
							url: '/pages/index/index'
						})
					} else {
						uni.showToast({
							title: '验证码过期请获取新的验证码'
						})
					}
				})
				this.show = false
				this.auth_code = ''
			},
			// 选择银行卡类型
			changes(e) {
				console.log("e:", e);
			},
			// 添加银行卡
			addCar() {
				let self = this
				let {
					carNum,
					carType,
					Phone
				} = this.userInfo
				var carBool = /^([1-9]{1})(\d{15}|\d{16}|\d{17}|\d{18}|\d{19})$/.test(carNum)
				let phoneBool = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(Phone)
				if (!carNum) {
					uni.showToast({
						icon: "none",
						title: '请输入银行卡号',
					})
					return
				} else if (!carBool) {
					uni.showToast({
						icon: "none",
						title: '请输入正确的银行卡号'
					})
					return
				} else if (!carType) {
					uni.showToast({
						icon: "none",
						title: '请选择类型'
					})
					return
				} else if (!Phone) {
					uni.showToast({
						icon: "none",
						title: '请输入电话号码'
					})
					return
				} else if (!phoneBool) {
					uni.showToast({
						icon: "none",
						title: '请输入正确的电话号码'
					})
					return
				}
				// 获取验证码
				self._post('withhold.withhold/index', {
					bank_card: carNum,
					card_type: carType,
					phone: Phone,
					car_name: this.carName
				}, function(res) {
					self.show = true
				})
			},
			// cartType(value) {
			// 	for (let item in blankName) {
			// 		if (item == value) return blankName[item]
			// 	}
			// },
			camera() {
				let self = this
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						const arrayBuffer = res.apFilePaths[0]
						uni.getFileSystemManager().readFile({
							filePath: arrayBuffer,
							encoding: 'base64',
							success: res => {
								console.log('data:image/png;base64,' + res.data);
							},
							fail: res => {
								console.log(res);
							}
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.top {
		display: flex;
		width: 100%;
		height: 220rpx;
		background-color: #fefffe;
		padding-top: 40rpx;
	}
	.leftText {
		flex: 1;
		font-size: 45rpx;
		font-weight: 600;
		padding: 30rpx;
	}
	.rightBut {
		width: 400rpx;
		
	}
	.rightBut .bgBox {
		width: 90%;
		height: 90rpx;
		margin-top: 50rpx;
		background: linear-gradient(to right, #fef1ae 0%, #fcf4da 100%);
		border-radius: 50rpx;
		position: relative;
	}
	.rightBut text {
		position: absolute;
		top: 120rpx;
		font-size: 28rpx;
		width: 270rpx;
		left: 380rpx;
		text-align: center;
		color: #ce9a36;
	}
	.codeBox {
		width: 100%;
		// padding: 10rpx;
	}
	.code {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffff;
		height: 100rpx;
		padding:  0 30rpx;
		color: #c0c4cc;
	}
	.agreement {
		display: flex;
		margin-top: 20rpx;
	}
	.bot {
		background-color: #fecb31;
		margin: 70rpx auto ;
		width: 682rpx;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.bot text{
		font-weight: 400;
		margin: auto;
		font-size: 35rpx;
	}
	::v-deep.wrap .u-button {
		margin: 0 auto !important;
		width: 100rpx !important;
	}

	.active {
		background-color: #c0c4cc !important;
	}

	.btn {
		height: 80rpx;
		line-height: 80rpx;
		width: 140rpx;
		margin-left: 30rpx;
		font-size: 22rpx;
		background-color: #2979ff;
		color: white;
	}

	::v-deep.uni-select__input-placeholder {
		color: #c0c4cc;
		font-size: 28rpx;
	}

	::v-deep.uni-select {
		border: white;
		padding-left: 8rpx;
	}

	::v-deep.u-button {
		margin: 80rpx auto;
		width: 320rpx !important;
	}

	.wrap {
		padding: 20rpx;
	}

	.title {
		font-size: 44rpx;
		text-align: center;
		display: block;
		position: relative;
		top: 100rpx;
	}

	.item {
		background-color: white;
		margin: 20rpx auto;
		padding: 30rpx;

		.titl {
			font-size: 32rpx;
			display: block;
			margin-bottom: 30rpx;
			margin-top: 40rpx;
		}
	}
</style>